<template>
  <!-- hHh lpR fFf ----hHh lpR fFf-->
  <q-layout view="hHh lpR fFf">
    <q-header>
      <AmyHeader/>
    </q-header>

    <q-drawer
      class="my-toolbox"
      v-model="isToolboxShow"
      show-if-above
      bordered
      side="left"
      :width="250"
    >
      <AmyToolbox/>
    </q-drawer>

    <q-page-container>
      <div class="bg-white">
        <AmyPageTabPanels :tabs="tabItems"/>
      </div>
      <div>
        <router-view />
      </div>
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import AmyHeader from 'layouts/AmyHeader.vue';
import AmyToolbox from 'layouts/AmyToolbox.vue';
import AmyPageTabPanels from 'components/tab/AmyPageTabPanels.vue';
import { useCommonStore } from 'stores/commonStore';
import { storeToRefs } from 'pinia';
import { useNavTabStore } from 'stores/navTabStore';
import { menuTab } from 'stores/model';

export default defineComponent({
  name: 'MainLayout',
  components: {
    AmyHeader,
    AmyToolbox,
    AmyPageTabPanels
  },
  setup (props, context) {
    const store = useCommonStore();
    const {
      isToolboxShow
    } = storeToRefs(store);
    //*******************************
    //      tabPanels
    //*******************************
    const menuStore = useNavTabStore();
    let tabItems = ref<menuTab[] | null>([]);
    tabItems.value = menuStore.routeTabs;

    //*******************************
    //      toolbox
    //*******************************
    return {
      isToolboxShow,
      tabItems
    }
  }
});
</script>

<style lang="scss" scoped>
.my-toolbox {
  overFlow-y:scroll;
  overFlow-x:hidden;

  scrollBar-face-color:green;
  scrollBar-hightLight-color:red;
  scrollBar-3dLight-color:orange;
  scrollBar-darkshadow-color:blue;
  scrollBar-shadow-color:yellow;
  scrollBar-arrow-color:purple;
  scrollBar-track-color:black;
  scrollBar-base-color:pink;
}
</style>
